<template>
	<view class="login_content">
		<view class="login_container">
			<view class="login_top">
				漫研社
			</view>
			<view class="login_inputs">
				<u--input
					placeholder="手机号"
					prefixIcon="phone-fill"
					prefixIconStyle="font-size: 22px;color: #909399;"
					shape="circle"
					customStyle="background-color: white;height:30px"
					v-model="mobile"
				></u--input>
				<u--input
					placeholder="密码"
					prefixIcon="lock-fill"
					prefixIconStyle="font-size: 22px;color: #909399;"
					shape="circle"
					customStyle="background-color: white;height:30px;margin-top:25px"
					:password="true"
					v-model="password"
				></u--input>
				<view class="login_tip">
					<view class="login_register" @click="go_register">
						注册
					</view>
					<view class="login_forget">
						忘记密码
					</view>
				</view>
				<view class="login_bt">
					<u-button type="primary" text="登录" shape="circle" class="bt" @click="login"></u-button>
				</view>
				<view v-show="isShow" style="text-align: center;width: 100%;margin-top: 10px;color: red;font-size: 13px;">
					{{error_tip}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				isShow: false,
				error_tip: ''
			}
		},
		methods: {
			login() {
				uni.request({
					url: api + '/login/',
					method:'POST',
					// sslVerify: false,
					data:{
						username: this.mobile,
						password: this.password
					},
					success:res=>{
						if(res.data.state == 'OK'){
							uni.setStorageSync('username', res.data.username)
							uni.setStorageSync('mobile', this.mobile)
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}else{
							this.error_tip = res.data.tip
							this.isShow = true
							return
						}
					}
				})
			},
			go_register() {
				uni.navigateTo({
					url:'/pages/register/register'
				})
			}
		}
	}
</script>

<style>
	.login_content{
		min-height: 100vh;
		height: auto;
		width: 100%;
		background-image: url('@/static/loginbck.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* padding-top: 50px; */
	}
	.login_container{
		padding: 10px 40px 0 40px;
	}
	.login_top{
		width: 100%;
		font-size: 25px;
		font-weight: 700;
		text-align: center;
		padding-top: 50px;
		color: white;
		margin-top: 50px;
	}
	.login_inputs{
		margin-top: 80px;
	}
	.login_tip{
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		padding: 0 10px 0 10px;
	}
	.login_tip view{
		font-size: 13px;
		color: gray;
	}
	.login_bt{
		margin-top: 30px;
	}
	.bt{
		border: none;
		background: linear-gradient(90deg, #85e9e2 3%, #e79bee 97%);
		box-shadow: 0px 2px 10px 0px rgba(0, 172, 153, 0.4);
	}
</style>
